<template>
  <div>
    <!-- 
    	v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
    -->
    <div>
      <span>用户名:</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码:</span>
      <input type="password" v-model="pass" />
    </div>
    <div>
      <span>来自于:</span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
    <div>
      <!-- 多选框
            v-model 返回的值是数组
         -->
      <span>爱好</span>
      <input type="checkbox" v-model="hobby" value="吃饭" />吃饭
      <input type="checkbox" v-model="hobby" value="睡觉" />睡觉
      <input type="checkbox" v-model="hobby" value="打豆豆" />打豆豆
    </div>
    <div>
      <!-- 单选框
         -->
      <input type="radio" name="sex" value="男" v-model="gender" />男
      <input type="radio" name="sex" value="女" v-model="gender" />女
    </div>
    <!-- 文本域 -->
    <div>
      <span>自我介绍</span>
      <textarea v-model="intro" id="" cols="30" rows="10"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pass: "",
      from: "北京市",
      hobby: [],
      gender: "",
      intro: "",
    };
  },
};
</script>

<style>
</style>